<template>
  <div class="box">
    <div style="height: 150px"></div>
    <!-- <particles> </particles> -->
    <!-- 粒子特效背景组件 -->
    <div class="login">
      <img src="~@/assets/22.jpg" alt="" width="120" height="120" />
      <h2>TMS智慧物流</h2>
      <h2>系统管理后台</h2>
      <div style="margin-top: 45px">
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
          style="float: left; width: 400px; margin-left: -25px"
        >
          <el-form-item prop="UserName">
            <el-input
              type="text"
              prefix-icon="iconfont el-icon-user"
              v-model="ruleForm.UserName"
              autocomplete="off"
              placeholder="请输入用户名"
            ></el-input>
          </el-form-item>
          <el-form-item prop="UserPwd">
            <el-input
              type="password"
              prefix-icon="iconfont el-icon-lock"
              v-model="ruleForm.UserPwd"
              autocomplete="off"
              placeholder="请输入用户密码"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              v-waves
              size="medium"
              style="
                width: 300px;
                background-color: #30c2a5;
                color: hsl(108, 68%, 40%);
              "
              @click="submitForm(ruleForm)"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import qs from "qs";
//import waves from "@/directive/waves"; // 水波纹指令
export default {
  name: "login",
  //components: { Particles },
  // directives: {
  //   waves,
  // },
  data() {
    var validateName = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("账号不能为空"));
      } else {
        if (this.ruleForm.UserName !== "") {
          this.$refs.ruleForm.validateField("UserName");
        }
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("密码不能为空"));
      } else {
        if (this.ruleForm.UserPwd !== "") {
          this.$refs.ruleForm.validateField("UserPwd");
        }
        callback();
      }
    };
    return {
      //登录表单
      ruleForm: {
        UserName: "",
        UserPwd: "",
      },

      //表单验证
      rules: {
        UserName: [{ validator: validateName, trigger: "blur" }],
        UserPwd: [{ validator: validatePass, trigger: "blur" }],
      },
    };
  },
  created() {
    //定时器mounted
    // const timer = setInterval(() => {
    //   this.getjenkinslog(); //调用刷新token的方法
    //   console("token已刷新");
    // }, 300000); // 60000毫秒
    // //销毁定时器
    // this.$once("hook:beforeDestroy", () => {
    //   clearInterval(timer);
    // });
  },
  //inject: ["reload"], //注入
  methods: {
    //登录获取token
    // login(){

    // },

    submitForm() {
      this.axios({
        method: "post",
        url: "https://localhost:44328/connect/token",
        headers: { "content-type": "application/x-www-form-urlencoded" },
        // data: {
        //   client_id: "ProjectTMS_App",
        //   client_secret: "E5Xd4yMqjP5kjWFKrYgySBju6JVfCzMyFp7n2QmMrME=",
        //   grant_type: "password",
        //   scope: "ProjectTMS",
        //   username: this.ruleForm.UserName,
        //   password: this.ruleForm.UserPwd,
        // },
        data: qs.stringify({
          client_id: "SmartTms_App",
          client_secret: "E5Xd4yMqjP5kjWFKrYgySBju6JVfCzMyFp7n2QmMrME=",
          grant_type: "password",
          scope: "SmartTms",
          username: this.ruleForm.UserName,
          password: this.ruleForm.UserPwd,
        }),
      }).then((res) => {
        console.log(res, "给我带来了什么？");
        if (res.data.access_token != "") {
          //登录成功
          this.$message.success("登录成功");
          //window.sessionStorage.setItem("guid", res.data.guid);
          window.sessionStorage.setItem("token", res.data.access_token);
         // window.sessionStorage.setItem("userName", res.data.name); //那个用户登录的
          //跳转到指定页面
          this.$router.push({ path: "/Index/" });
        } else {
          //登录失败
          this.$message.error("登录失败");
          this.reload(); //局部刷新
        }
      });
    },
    //定时刷新token
    // getjenkinslog() {
    //   console.log(window.sessionStorage.getItem("guid"));
    //   this.axios
    //     .get(
    //       "UserAPI/RefreshToken?guid=" + window.sessionStorage.getItem("guid")
    //     )
    //     .then((res) => {
    //       console.log("定时器测试", res.data.authorization);
    //       window.sessionStorage.setItem("token", res.data.token.tokenStr);
    //       console.log(
    //         "我的刷新后token",
    //         window.sessionStorage.getItem("token")
    //       );
    //     });
    // },
    //submitForm(ruleForm) {
    // this.$axios.post({
    //    method: 'post',
    //    url: 'http://localhost:44318/connect/token',
    //    data:{

    //    }
    // })

    //虚假登录
    // if (ruleForm.UserName == "admin" && ruleForm.UserPwd == "123456") {
    //   //登录成功
    //   this.$message.success("登陆成功");
    //   //跳转到指定页面
    //   this.$router.push({ path: "/Index/" });
    // }

    // this.axios
    //   .post({
    //     url: "http://localhost:44318/connect/token",
    //     method: "post",
    //     data: {
    //       aa:'haha'
    //     },
    //   })
    //   .then((res) => {
    //     if (res.data.meta == 200) {
    //       //登录成功
    //       this.$message.success(res.data.msg);
    //       window.sessionStorage.setItem("guid", res.data.guid);
    //       //window.sessionStorage.setItem("token", res.data.token.tokenStr);
    //       window.sessionStorage.setItem("userName", res.data.name); //那个用户登录的
    //       //跳转到指定页面
    //       this.$router.push({ path: "/Index/" });
    //     } else {
    //       //登录失败
    //       this.$message.error(res.data.msg);
    //       this.reload(); //局部刷新
    //     }
    //   });
    //},
  },
};
</script>


<style>
.box {
  background-color: #f8f8f8;
  width: 100%;
  height: 100%;
  background-image: url("../../assets/2.jpg");
}
.login {
  border: 2px solid #ded4d5;
  width: 450px;
  height: 530px;
  margin: auto;
  background-color: rgb(222, 212, 213);
}
.login img {
  margin-top: 20px;
}
.login h2 {
  color: hsl(108, 68%, 40%);
}
</style>